<template>
  <div class="left_center_two">
    <Echart id="leftCenterTwo" :options="options" class="left_center_inner" ref="charts"/>
    <div class="pic" v-if="picShow" @click="picShow=false"></div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      options: {},
      picShow:false,
    };
  },
  created() {
    this.getData()
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    getData() {
      let that=this
      this.init()

      this.$nextTick(() => {
        that.mapClick()
      })

    },
    init() {
      let that=this
      this.options = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          top: "5%",
          left: "center",
          textStyle: {
            color: "#fff",
            fontSize: 16
          },
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          axisLabel: {
            formatter: '{value}',
            textStyle: {
              color: '#fff',
              fontSize: 14
            }
          },
          data: ['创新之核', '武进区', '常州市']
        },
        yAxis: [
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            },
            //  y轴刻度线
            axisLine: { show: true },
            // 是否显示坐标轴刻度
            axisTick: {
              show: false
            },
            // 去掉网格线
            splitLine: {
              show: false
            },
            splitArea: {
              show: false
            }
          },
          {
            type: 'value',
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            },
            //  y轴刻度线
            axisLine: { show: false },
            // 是否显示坐标轴刻度
            axisTick: {
              show: false
            },
            // 去掉网格线
            splitLine: {
              show: false
            },
            splitArea: {
              show: false
            }
          }
        ],
        series: [
          {
            min: 0,
            name: '高新技术企业密度',
            type: 'bar',
            data: [3.3, 0.6, 0.4]
          },
          {
            min: 0,
            name: '国家级孵化器密度',
            type: 'line',
            data: [0.135, 0.008, 0.003],
            yAxisIndex: 1,
          }
        ]
      };
    },
    mapClick() {
      let that=this
      let chart=this.$refs.charts.chart
      chart.on("click", (params) => {
        console.log(params);
        if (params.data){
          this.picShow=true
        }

      });
    },
  },
};
</script>
<style lang='scss' scoped>
.left_center_two{
  width: 100%;
  height: 100%;
  position: relative;
  .pic{
    position: absolute;
    top: 0;
    width: 100%;
    height: 98%;
    //padding: 16px 16px 10px 16px;
    background: rgba(0,0,0,.8);
    box-sizing: border-box;
    background-size: cover;
    background-position: center center;
    background-image: url("../../assets/img/datav/cyxz/kcxz.png");
  }
}
</style>
